/**
 * 新增hash类型数据
 */
Vue.component("new-hash", {
    template :
        `
        <div>
            {{conversion}}
            <Row v-for="(val, index) in values" type="flex" align="middle" justify="center">
                <i-col span="3" align="middle"> key: </i-col>
                <i-col span="9">
                    <Input type="textarea" v-model="val.key" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..." @on-change="returnValue(index, val.key, 'key')"/>
                </i-col>
                <i-col span="3" align="middle"> value: </i-col>
                <i-col span="9">
                    <Input type="textarea" v-model="val.value" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..." @on-change="returnValue(index, val.value, 'value')"/>
                </i-col>
            </Row>
            <Button type="dashed" icon="ios-plus-empty" @click="newLine">
                <span>新增一行...</span>
            </Button>
        </div>
        `
    ,
    props: ["value"],
    data : function () {
        return {
            values : null
        };
    },
    methods : {
        returnValue: function (index, value, type) {
            var obj = this.values[index];
            if(type == "key"){
                obj.key = value;
            }else if(type == "value"){
                obj.value = value;
            }
            this.$emit("returnValue", JSON.stringify(this.values));
        },
        newLine : function () {
            this.values.push({
                "key" : "",
                "value" : ""
            });
        }
    },
    computed : {
        conversion : function () {
            let txt = this.value;
            if(txt && txt.indexOf("[") == 0){
                this.values = JSON.parse(txt);
            }else {
                this.values = [
                    {
                        "key" : "",
                        "value" : txt ? txt : ""
                    }
                ];
            }
        }
    }
});